<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import Help from './Help.vue'
import NotFound from './NotFound.vue'

window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
});

const routes = {
  '/': Home,
  '/about': About,
  '/help': Help,
  '/home': Home
}
const currentPath = ref(window.location.hash);

const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>
<template>
  <a href="#/home">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/help">Help</a> |
  <a href="#/aldfjsla">404</a> |
  <a href="/manage">管理端</a>
  <hr />
  <p>{{ currentPath }}</p>
  <component :is="currentView" />
</template>